<template>
	<view class="all">
		<!-- 头部搜索 -->
		<u-notify ref="uNotify" message="Hi uView"></u-notify>
		<view class="searchItem">
				<view class="search">
						<i class="iconfont icon-sousuo"></i>
					<input type="text" v-model.trim="searchValue" placeholder="搜索商品"/>
				</view>
				<button type="default" @click="TOsearch">搜索</button>
		</view>
		<!-- 推荐 -->
		<view class="recommend">
			推荐搜索
			<view class="recommendcard">
				<view class="card" v-for="(item,index) in imageItem.subCategoryList[0].thirdCategoryList" :key="item.link.id" @click="handlerDetail(item.link.id)">
						{{item.title}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {mapGetters} from "vuex"
	export default {
		data() {
			return {
				searchValue:'',//搜索数据
			}
		},
		computed:{
			...mapGetters(["imageItem"])
		},
		methods: {
			handlerDetail(id){
				wx.navigateTo({
					url:"/pages/detail/detail?id="+id
				})
			},
			TOsearch(){
				console.log(this.searchValue)
				this.$refs.uNotify.show({
				            top: 10,
				            type: 'error',
				            color: '#000',
				            bgColor: '#e8e8e8',
				            message: '抱歉,该搜索的商品不存在,请重新输入!',
				            duration: 1000 * 1,
				            fontSize: 15,
				            safeAreaInsetTop:false
				        })
			}
		}
	}
</script>

<style lang="stylus">
.all
	width 95%
	padding 0 18upx
	overflow hidden
	.searchItem
		width 100%
		height 100upx
		margin-top 40upx
		border-bottom 1px solid #eee
		display flex
		align-items: center
		justify-content space-between
		 .search
			display flex
			font-size 36upx
			color #eee
			input
				color #000000
			.iconfont
				font-size 36upx
				margin-right 30upx
		button
			width: 62px;
			height: 39px;
			font-size: 15px;
			margin: 0
			background-color #c5847e
			color #fcf8f7
	.recommend
		margin-top 36upx
		.recommendcard
			display flex
			flex-wrap wrap
			margin-top 36upx
			.card
				height 70upx
				line-height 70upx
				background #f5f5f5
				padding 0 20upx
				border-radius 10upx
				font-size 32upx
				margin-right 20upx
				margin-bottom 24upx
				color #666666
</style>
